<html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>滚动测试</title>
    <style>
        .item{
            height: 200px;
            font-size: 50px;
            border-bottom: 1px solid;
        }
    </style>
    </head>
    <body>
        <div class="scroll-box">
            <div class="box block-1" style="background:#001;height:200px"></div>
            <div class="box block-2" style="background:#002;height:200px"></div>
            <div class="box block-3" style="background:#003;height:200px"></div>
            <div class="box block-4" style="background:#004;height:200px"></div>
            <div class="box block-5" style="background:#005;height:200px"></div>
            <div class="box block-6" style="background:#006;height:200px"></div>
            <div class="box block-7" style="background:#007;height:200px"></div>
            <div class="box block-8" style="background:#008;height:200px"></div>
            <div class="box block-9" style="background:#009;height:200px"></div>
            <div class="box block-10" style="background:#010;height:200px"></div>
        </div>
        <div style="height: 600px;overflow: scroll;">
            <ul class="content">
                <li class="item">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
                <li class="item">4</li>
                <li class="item">5</li>
                <li class="item">6</li>
                <li class="item">7</li>
                <li class="item">8</li>
                <li class="item">9</li>
                <li class="item">0</li>
            </ul>
        </div>
    </body>
</html>